<template>
  <div class="app-container">
    <!-- 条件查询 -->
      <div>
         <el-form ref="form" :inline="true" :model="userWhere" label-width="80px" class="demo-form-inline">
                <el-form-item label="用户名" size="mini">
                  <el-input v-model="userWhere.name"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" size="mini"  @click="selectWhere">查询</el-button>
                  <el-button type="warning" size="mini">取消</el-button>
                </el-form-item>
              </el-form>
      </div>
    <!-- 添加数据 -->
    <div>
       <el-button type="success" @click="add" size="small"> 添加</el-button>
    </div>

    <!-- 列表渲染 -->
      <div>
        <el-table :data="tableData" style="width: 100%">
  <el-table-column type="index" label="序号" width="80">
  </el-table-column>
  <el-table-column prop="userImg" label="用户头像" width="180">
    <template slot-scope="scope">
      <img :src="scope.row.userImg" width="150" height="150" alt=""/>
    </template>
  </el-table-column>
                  <el-table-column  prop="username" label="用户名">
                  </el-table-column>
                  <el-table-column prop="sex" label="性别">
                  </el-table-column>
                  <el-table-column prop="age" label="年龄">
                  </el-table-column>
                  <el-table-column  prop="desc" label="备注">
                  </el-table-column>
                   <el-table-column  label="操作">
                     <teleport slot-scope='scope'>
                        <el-button type="primary" icon="el-icon-edit" @click="update(scope.row)" size="small">修改</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
                     </teleport>

                   </el-table-column>
                </el-table>
          </div>
    <!-- 分页插件 -->
       <el-pagination
                  :current-page="pageIndex"
                  :page-size="pageSize"
                  :total="total"
                  style="padding: 30px 0; text-align: center;"
                  layout="total, prev, pager, next, jumper"
                  @current-change="listPage"
                />
    <!-- 添加/修改窗体 -->
   <el-dialog title="添加/修改用户窗体"  :visible.sync="usersVisible" width="65%">
        <el-form ref="form" :model="addUsers" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="addUsers.username" ></el-input>
          </el-form-item>
          <el-form-item label="用户性别:" size="mini">
             <el-radio-group v-model="addUsers.sex">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄" size="mini">
            <el-input type="Number" v-model="addUsers.age"></el-input>
          </el-form-item>
          <el-form-item label="备注" size="mini">
             <el-input type="textarea" v-model="addUsers.desc"></el-input>
            </el-form-item>
          </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="usersVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendUsersAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
   export default {
      name: 'index',
      data(){
        return {
          pageIndex: 1,//当前第几页
          pageSize: 10,//每页显示多少条
          total: 20, //总共多少条记录
          //添加用户信息
          addUsers:{
            id: 0,
            userImg: '',
            username: '',
            sex: 0,
            age: 0,
            desc: ''
          },
          //是否显示
          usersVisible: false,
          //条件查询
          userWhere: {
            name: ''
          },
          tableData:[
            {
            id: 1,
            userImg: '../../assets/img/userImg01.jpg',
            username: '王二锤',
            sex: 1,
            age: 22,
            desc: ''
          },
          {
            id: 2,
            userImg: '../../assets/img/userImg01.jpg',
            username: '王三锤',
            sex: 0,
            age: 23,
             desc: ''
          },
          {
            id: 3,
            userImg: '../../assets/img/userImg01.jpg',
            username: '王四锤',
            sex: 1,
            age: 25,
             desc: ''
          },

          ],
        }
      },
      methods: {
        //修改方法
        update(data){
          this.addUsers.id = data.id
          this.addUsers.username = data.username
          this.addUsers.age = data.age
          this.addUsers.sex = data.sex
          this.addUsers.desc = data.desc
          this.usersVisible = true
        },
        //删除方法
        del(id){
          this.tableData = this.tableData.filter((item) => item.id!== id)
        },
        //提交添加数据
        sendUsersAdd(){
          this.tableData.push(this.addUsers)
          this.usersVisible = false
        },
        //条件查询
        selectWhere(){

        },
        //添加按钮
        add(){
          this.addUsers = {}
          this.usersVisible = true
        },
      }
   }
</script>

<style>
</style>
